<template>
<!-- 这是注册页面 -->
  <div id="register">
      <div class="register_title">
        <div><router-link to="/"><img src="./../../../public/img/logo10.png" alt=""></router-link></div>
        <h3>{{$t("Register.title")}}</h3>
      </div>
      <div class="register_content">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
          <el-form-item :label="$t('Register.rules.accountNumber')" prop="userMobile" :hide-required-asterisk='true'>
            <el-input v-model="ruleForm.userMobile" :placeholder="$t('share.rules.userMobile')" maxlength="22"></el-input>
          </el-form-item>
          <el-form-item :label="$t('Register.rules.phone')" prop="userPhone" :hide-required-asterisk='true'>
            <el-input v-model="ruleForm.userPhone" :placeholder="$t('share.rules.userPhone')" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item :label="$t('Register.rules.code')" prop="phoneCode" class="verificationCode">
            <div class="iconFather">
              <el-input type="string" v-model="ruleForm.phoneCode" class="codeInput" :placeholder="$t('share.rules.verificationCode')" maxlength="8"></el-input>
              <div class="code"><button @click="phoneCode('ruleForm')" :disabled="codeBool">{{verificationCode}}</button></div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('Register.rules.pass')" prop="userPassword" :hide-required-asterisk='true'>
            <el-input type="password" v-model="ruleForm.userPassword" autocomplete="off" :placeholder="$t('share.rules.userPassword')" maxlength="12"></el-input>
          </el-form-item>
          <el-form-item :label="$t('Register.rules.passAgain')" prop="userPasswordAgain" :hide-required-asterisk='true' >
            <el-input type="password" v-model="ruleForm.userPasswordAgain" autocomplete="off" :placeholder="$t('Register.rules.userPassAgain')" maxlength="12"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" >{{$t("Register.register2")}}</el-button>
          </el-form-item>
          <div class="reg_text"><router-link to="/login">{{$t("Register.loginRouter")}}</router-link></div>
        </el-form>
      </div>
      <div class="login_bottom">
        <div class="container">
          <div class="row">
            <div class="col-md-12 text-center">
              <ul class="social">
                <li class="wow bounceIn">
                  <a href="javascript:void(0);">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="wow bounceIn" data-wow-delay="0.1s">
                  <a href="javascript:void(0);">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="wow bounceIn" data-wow-delay="0.2s">
                  <a href="javascript:void(0);">
                    <i class="fa fa-dribbble"></i>
                  </a>
                </li>
                <li class="wow bounceIn" data-wow-delay="0.3s">
                  <a href="javascript:void(0);">
                    <i class="fa fa-behance"></i>
                  </a>
                </li>
                <li class="wow bounceIn" data-wow-delay="0.4s">
                  <a href="javascript:void(0);">
                    <i class="fa fa-pinterest"></i>
                  </a>
                </li>
                <li class="wow bounceIn" data-wow-delay="0.5s">
                  <a href="javascript:void(0);">
                    <i class="fa fa-google"></i>
                  </a>
                </li>
              </ul>
              <div class="bottom_text"><a href="http://www.beian.miit.gov.cn/" target="_blank">粤ICP备18151619号</a><i class="nbsp"></i><i class="nbsp"></i>广州市优粤家科技有限公司<i class="nbsp"></i>版权所有</div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
let Base64 = require('js-base64').Base64;
export default {
data() {
    // 密码验证
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('share.rules.userPassword')));
        } else {
          if (this.ruleForm.userPasswordAgain !== '') {
            this.$refs.ruleForm.validateField('userPasswordAgain');
          }
          callback();
        }
      };
      // 再次输入密码验证
    var reinspection = (rule, value, callback) => {
      if (value === '') {
          callback(new Error(this.$t('share.rules.userPassword')));
        } else if (value !== this.ruleForm.userPassword) {
          callback(new Error(this.$t('Register.rules.userPasswordAgain')));
        } else {
          callback();
        }
      };
    return {
      loading: false, // 提交时加载状态
      verificationCode: this.$t('share.rules.phoneCode'), //获取验证码
      codeBool: false,  //获取验证码是否禁用
      ruleForm: {
        userMobile: '', //账号
        userPhone: '',  //手机号
        phoneCode: '',  //手机验证码
        userPassword: '', //密码
        userPasswordAgain: '', //再次输入密码
      },
      // 注册验证
      rules: {
        userMobile: [
          { required: true, message: this.$t('share.rules.userMobile'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9@.]{4,22}$/, message: this.$t('share.rules.errorMobile'),trigger: 'blur'}
        ],
        userPhone: [
          { required: true, message: this.$t('share.rules.userPhone'), trigger: 'blur' },
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: this.$t('share.rules.errorPhone'),trigger: 'blur'}
        ],
        phoneCode: [
          { required: true, message: this.$t('share.rules.verificationCode'), trigger: 'blur' },
          { pattern: /^\d{5,8}$/, message: this.$t('share.rules.errorCode'),trigger: 'blur'}
        ],
        userPassword: [
          {required: true, validator: validatePass, trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{6,12}$/, message: this.$t('share.rules.userPasswordLength'),trigger: 'blur'},
          
        ],
        userPasswordAgain: [
          {required: true, validator: reinspection, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    // 注册
    submitForm(ruleForm) {
      var _this=this
        _this.$refs[ruleForm].validate((valid) => {
            if(valid){
              // 请求后台数据
              _this.$post('user/register',{
                  username: _this.ruleForm.userMobile,
                  password: Base64.encode(_this.ruleForm.userPassword),
                  phone: _this.ruleForm.userPhone,
                  captcha: _this.ruleForm.phoneCode,
              }).then(res=>{
                if(res.code=="200"){
                  // 消息提示
                  _this.$MessageAlert(true,_this.$t('Register.successMessage'),'success');
                  // 成功后重置输入框
                  _this.$refs[ruleForm].resetFields();
                  // 跳转到登陆页面
                  _this.$router.push({"path":"./login"})
                } else if(res.code=="0"){
                  _this.$MessageAlert(true,_this.$t('share.rules.errorCode'),'error');
                } else if(res.code=="400"){
                  _this.$MessageAlert(true,_this.$t('Register.warningMessage'),'error');
                } else {
                  _this.$MessageAlert(true,_this.$t('Register.failureMessage'),'error');
                }
              })
            }
        });
    },
    // 获取手机短信验证码
    phoneCode(ruleForm) {
      var _this = this;
      _this.codeBool = true;
      let time = 60;
      let flag = true;
      // 只验证手机是否有输入，部分验证，不是全部验证
      _this.$refs[ruleForm].validateField('userPhone', valid => {
        if(!valid) {
            // 倒计时
            if(flag){
              // 请求验证码
              _this.$get(`user/sendSms/${_this.ruleForm.userPhone}`
              ).then(res => {
                if( res.code == 200) {
                  _this.$MessageAlert(true, _this.$t('share.rules.succSend'),'success');
                } else {
                  _this.$MessageAlert(true, _this.$t('share.rules.errSend'),'error');
                }
              }).catch( ()=> {
                _this.codeBool = false;
              });
              // 倒计时
              let timer = setInterval(function() {
                  flag = false;
                  _this.codeBool = true;
                  if(time == 0){
                      _this.verificationCode = _this.$t('share.rules.phoneCode');
                      clearInterval(timer);
                      time = 60;
                      flag = true;
                      _this.codeBool = false;
                  }else {
                      _this.verificationCode = time + " s "+_this.$t('share.rules.Resend');
                      time--;
                  }
              },1000);
            }
        } else {
          _this.codeBool = false;
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-height: 880px) {
  #register{
    height: 880px !important;
  }
}
.el-icon-s-custom{
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 5px;
}
.el-icon-lock{
  font-size: 22px;
  margin-bottom: 5px;
}
.el-button{
  display: block;
  font-size: 20px;
  margin: auto;
  letter-spacing:2px;
  margin-top: 30px;
  background-color: transparent;
  border: 1px solid black;
  border-radius: 0px;
  color: black;
}
.el-button:hover {
  background-color: black;
  border: 1px solid black;
  color: white;
}
.el-button--primary:focus {
  background-color: black;
  border: 1px solid black;
}
.standby{
  padding-top: 30px;
  padding-bottom: 20px;
}
#register {
  height: 100vh;
  min-width: 1000px;
  display: flex;
  position: relative;
  flex-direction: column;
  background: url("../../../public/img/header.jpg") 0px 0px no-repeat;
  background-size: cover;
  .register_title{
    margin: 0px auto;
    display: inline-block;
    margin-bottom: 20px;
    h3{
      margin-top: 0px;
      margin-bottom: 10px;
      text-align: center;
      letter-spacing: 2px;
      color: black;
    }
    a {
      img {
        height: 100px;
      }
    }
  }
  .register_content {
    margin: auto;
    margin-top: 0px;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 0px 30px;
    padding-top: 20px;
    padding-bottom: 10px;
    width: 450px;
    display: flex;
    flex-direction: column;
  }
  /deep/ .el-form-item__content{
    margin: 0px !important;
  }
  /deep/ .el-input input{
    text-indent: 1.3em;
  }
  /deep/ .el-form-item__label{
    text-align: left;
    margin-bottom: 0px;
    line-height: 22px;
  }
  /deep/ .el-form-item {
    margin-bottom: 18px;
  }
}
.reg_text {
  padding-top: 15px;
  a {
    color: #409EFF;
    font-size: 15px;
  }
}
.login_bottom {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 40px;
  color: white;
  .social {
    display: flex;
    justify-content: center;
    li {
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin: 0px 5px;
      border-radius: 50%;
      overflow: hidden;
      transition-duration: 0.4s;
      i {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 17px;
        color: white;
      }
    }
    li:hover {
      transition-duration: 0.4s;
      background-color: white;
      i {
        color: black;
      }
    }
  }
  .bottom_text {
    margin-top: 20px;
    .nbsp {
      padding:0px 5px;
    }
    a {
      font-weight: 100;
    }
    a:visited { 
      color: white; 
      text-decoration: none;
    }
  }
}
.verificationCode {
    .code {
      background-color: #fff;
      border: 1px solid #DCDFE6;
      color: #555;
      line-height: 38px;
      width: 120px;
      text-align: center;
      float: right;
      border-radius: 5px;
      button {
        background-color: #fff;
      }
      button:hover {
        cursor:pointer;
      }
    }
    .codeInput {
      width: 220px;
      display: inline-block;
    }
}
.iconFather {
  position: relative;
}
</style>